<style lang="scss" scoped>
.reg {
  width: 100%;
  height: 100vh;
  background-image: url('@/images/bg/login_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  .register {
    width: 300px;
    height: 400px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    .getCode {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>

<template>
  <div class="reg">
    <img src="@/images/logo.png" height="90" alt="" />
    <div class="register" style="z-index: 3">
      <h2 style="text-align: center; margin-bottom: 20px">注册</h2>
      <el-form :model="registerInfo" :rules="regRules" ref="registerForm">
        <el-form-item prop="email">
          <el-input v-model="registerInfo.email" placeholder="请输入邮箱"></el-input>
          <el-button
            @click="getCode"
            type="primary"
            :disabled="disabled"
            class="getCode"
            style="width: 100px"
            >{{ codeMsg }}</el-button
          >
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="registerInfo.code" placeholder="请输入验证码"></el-input>
        </el-form-item>
        <el-form-item prop="pwd1">
          <el-input v-model="registerInfo.pwd1" placeholder="请确认密码" show-password></el-input>
        </el-form-item>
        <el-form-item prop="pwd2">
          <el-input
            v-model="registerInfo.pwd2"
            placeholder="请再次输入密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="invitationCode">
          <el-input v-model="registerInfo.invitationCode" placeholder="请输入邀请码"></el-input>
          <span class="getCode" style="right: 10px; font-size: 12px; color: #7e7e7e">选填</span>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" type="primary" size="large" @click="submit"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { request } from '../../axios/request'
import { JSEncrypt } from 'jsencrypt'

const router = useRouter()

// 绑定注册信息
const registerInfo = ref({
  email: '',
  code: '',
  pwd1: '',
  pwd2: '',
  invitationCode: 'RTTNASJBQI'
})

// 获取验证码
const codeMsg = ref('获取验证码')
let disabled = ref(false)
const getCode = async () => {
  if (registerInfo.value.email === '') {
    ElMessage.error('邮箱输入为空')
    return
  }
  // 发送请求获取验证码
  await request
    .post(
      '/api/health/user/v1/sendOutEmailCode',
      {
        email: registerInfo.value.email
      },
      {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
    )
    .then((res) => {
      let { status, message } = res.data
      if (status === '0000') {
        ElMessage.success(message)
        let timer = ref(6)
        disabled.value = true
        let time = setInterval(() => {
          timer.value--
          codeMsg.value = `${timer.value}秒后重新获取`
          if (timer.value === 0) {
            clearInterval(time)
            timer.value = 6
            disabled.value = false
            codeMsg.value = '获取验证码'
          }
        }, 1000)
      } else {
        ElMessage.error(message)
      }
    })
}

// 正则验证
const registerForm = ref()
const regRules = ref({
  email: { required: true, message: '邮箱不能为空', trigger: 'blur' },
  code: { required: true, message: '验证码不能为空', trigger: 'blur' },
  pwd1: { required: true, message: '密码不能为空', trigger: 'blur' },
  pwd2: { required: true, message: '确认密码不能为空', trigger: 'blur' }
})

// 注册
const submit = async () => {
  if (registerInfo.value.pwd1 !== registerInfo.value.pwd2) {
    ElMessage.error('确认密码有误')
    return
  }
  const crypt = new JSEncrypt()
  const publicKey =
    'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCuQd3gESx7VdIyRYUWjmjg61VIgUK6F45hClmqUMZ7xNiT5rlLM6e78osMvBF/yP7cVm7pK+NMCDWoVS1/AETpxJYqUlIC77ZAU8/MnP96IupnJL87vqhPcpdv7+VqLM38ls++yuD/F/HSoOQTv/leJh+dgE/4EYAJjOWFAbYfXwIDAQAB'
  crypt.setPublicKey(publicKey)
  const newPwd = ref(crypt.encrypt(registerInfo.value.pwd1))
  console.log(newPwd.value)
  // 调用注册接口
  await request
    .post(
      '/api/health/user/v1/register', {
        email: registerInfo.value.email,
        code: registerInfo.value.code,
        pwd1: newPwd.value,
        pwd2: newPwd.value,
        invitationCode: registerInfo.value.invitationCode
      },
      {
        headers: {
          ...registerInfo.value,
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
    )
    .then((res) => {
      console.log(res)
      if(res.status === 200) {
        ElMessage.success('注册成功')
        router.push('/login')
      } else {
        ElMessage.error('注册失败')
      }
    })
}
</script>